<template>
  <div class="Upgrade">
      一键升级
    <div class="demo-block">


    </div>
  </div>
</template>

<script>
export default {
    name: 'Upgrade',
    data() {
        return {
            websock:'',
            isConnected:false,
        }
    }
    ,created() {
        this.initWebSocket();
    }
    , destroyed() {
        this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
        onSubmit() {
            let params = {

            };
            if (this.isConnected) {
                this.websocketsend(JSON.stringify(params));
            }else{
                this.$notify.error({
                    title: '错误',
                    message:  '网络连接已断开.',
                    duration: 0
                });
            }
        }
        ,initWebSocket(){//初始化websocket
            const wsuri = "ws://49.4.7.160:58080/websocket/log/monitor";
            this.websock = new WebSocket(wsuri);//这里面的this都指向vue
            this.websock.onopen = this.websocketopen;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
            this.websock.onerror = this.websocketerror;
        }
        ,websocketopen(){//打开
            this.isConnected = true;
            console.log("WebSocket连接成功")
        }
        ,websocketonmessage(e){ //数据接收
            var data = JSON.parse(e.data);
            console.log(data);
            if('ing' === data['type']){
                this.$message({
                    message: '后台任务处理中，请不要重复提交',
                    type: 'warning'
                });
            }else if('error' === data['type']){
                this.status = 'error';
                this.icon = 'el-icon-upload';
                this.$notify.error({
                    title: '错误',
                    message:  data['message'],
                    duration: 0
                });
            }else if('step' === data['type']){
                this.active = data['active'];
                if (0 === data['active']) {
                    this.$message({
                        message: '提交成功，后台处理中...',
                        type: 'success'
                    });
                    this.status = 'success';
                }
            }else if('init' === data['type']){
                let msg = JSON.parse(data['message']);
                this.svnPre = msg['svnPre'];
                this.form.svnPath = msg['svnPath'];
                this.active = msg['step'];
                if (this.active >= 1 && this.active <= 4) {
                    this.icon = 'el-icon-loading';
                }else{
                    this.icon = 'el-icon-upload';
                }
            }
        }
        ,websocketclose(){  //关闭
            this.isConnected = false;
            console.log("WebSocket关闭");
        }
        ,websocketerror(){  //失败
            this.isConnected = false;
            console.log("WebSocket连接失败");
        }
        ,websocketsend(agentData){//数据发送
            this.websock.send(agentData);
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 24px;
    margin-top: 10px;
  }
    .el-input{
        width: 80%;
    }
</style>
